<!DOCTYPE html><html lang="en"><head><meta name="generator" content="Hexo 3.9.0"><meta charset="utf-8"><meta name="keywords" content="个人博客, 松林羊, ysl, songlinsheep, andus, blog, 个人站点, 个人网站"><meta name="description" content="松林羊的个人网站，用于记录，分享。欢迎交流^-^"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title> 基于Hexo-Ocean主题博客搭建 | 松林羊</title><link rel="shortcut icon" href="/smile.ico"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css"><script src="/js/pace.min.js"></script><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/0f81ff2f.js","daovoice"),daovoice("init",{app_id:"1559132c"}),daovoice("update")</script></head></html><body><main class="content"><section class="outer"><article id="post-基于Hexo-Ocean主题博客搭建" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal><div class="article-inner"><header class="article-header"><h1 class="article-title" itemprop="name"> 基于Hexo-Ocean主题博客搭建</h1></header><div class="article-meta"> <a href="/2019/09/30/基于Hexo-Ocean主题博客搭建/" class="article-date"><time datetime="2019-09-30T01:52:28.000Z" itemprop="datePublished">2019-09-30</time></a><div class="article-category"> <a class="article-category-link" href="/categories/Hexo/">Hexo</a></div> &emsp;<i class="fe fe-bar-chart"></i> <span class="post-count">3.7k</span>字 &emsp;<i class="fe fe-clock"></i> <span class="post-count">18</span>分钟</div><div class="tocbot"></div><div class="article-entry" itemprop="articleBody"><blockquote><p>本文主要是<a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">Hexo</a> <a href="https://zhwangart.github.io/" target="_blank" rel="noopener">Ocean</a>主题博客搭建过程的记录<br>博客地址：<a href="http://www.andus.top/">松林羊</a></p></blockquote><h3 id="hexo-的基本命令"><a href="#hexo-的基本命令" class="headerlink" title="hexo 的基本命令"></a>hexo 的基本命令</h3><p>hexo init [folder] ：创建一个存放网站源码的文件夹。<br>hexo new [layout] &lt;title&gt;：新建一篇文章。layout：默认post，可以是page、draft。title：文章标题，标题包含空格的话，请使用引号括起来。<br>hexo clean：清除缓存文件db.json和已生成的静态文件public,尤其是更换主题后<br>hexo g：生成静态html文件<br>hexo s：启动服务器<br>hexo d：部署网站<br>传送门：<a href="https://hexo.io/zh-cn/docs/" target="_blank" rel="noopener">官方文档</a></p><h3 id="下载主题源码"><a href="#下载主题源码" class="headerlink" title="下载主题源码"></a>下载主题源码</h3><p>在hexo init [folder] 的folder目录下执行：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/zhwangart/hexo-theme-ocean.git themes/ocean</span><br></pre></td></tr></table></figure><h3 id="参照主题文档进行配置"><a href="#参照主题文档进行配置" class="headerlink" title="参照主题文档进行配置"></a>参照主题文档进行配置</h3><p><a href="https://zhwangart.github.io/2018/11/30/Ocean/" target="_blank" rel="noopener">Ocean 中文文档</a><br><a href="https://zhwangart.github.io/2019/07/02/Ocean-Issues/" target="_blank" rel="noopener">关于 Ocean 使用中的问题</a></p><h3 id="文章自动添加Read-More"><a href="#文章自动添加Read-More" class="headerlink" title="文章自动添加Read More"></a>文章自动添加Read More</h3><p>将\themes\ocean\layout\_partial\article.ejs文中的&lt;% if (post.excerpt &amp;&amp; index){ %&gt;的else部分替换为如下内容：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">var</span> br = post.content.indexOf(<span class="string">'&lt;br&gt;'</span>) %&gt;</span><br><span class="line">&lt;% <span class="keyword">if</span>(br &lt; <span class="number">0</span> || !index) &#123; %&gt;</span><br><span class="line">  &lt;%- post.more %&gt;</span><br><span class="line">&lt;% &#125; <span class="keyword">else</span> &#123; %&gt;</span><br><span class="line">  &lt;%- post.content.substring(<span class="number">0</span>, br) %&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">  &lt;% <span class="keyword">if</span> (theme.excerpt_link) &#123; %&gt;</span><br><span class="line">	&lt;a <span class="class"><span class="keyword">class</span></span>=<span class="string">"article-more-link"</span> href=<span class="string">"&lt;%- url_for(post.path) %&gt;"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">%=</span> <span class="attr">theme.excerpt_link</span> %&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line">  &lt;% &#125; %&gt;</span><br><span class="line">&lt;% &#125; %&gt;</span><br></pre></td></tr></table></figure><h3 id="搜索功能不起作用-or-除开首页不能正常搜索"><a href="#搜索功能不起作用-or-除开首页不能正常搜索" class="headerlink" title="搜索功能不起作用? or 除开首页不能正常搜索"></a>搜索功能不起作用? or 除开首页不能正常搜索</h3><ol><li><p>本地检索需要安装插件</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-searchdb --save</span><br></pre></td></tr></table></figure></li><li><p>另外一个问题：插件搜索函数返回的url 地址有问题 ，作者说是因为 “中文字符被URL encode了 ” 。后来我找到一个解决办法：<br>将 [folder]/node_modules/hexo-generator-searchdb/templates/xml.ejs 文件中的：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;url&gt;&lt;%- encodeURIComponent(config.root + post.path) %&gt;&lt;/url&gt;</span><br></pre></td></tr></table></figure><p> 修改为</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;url&gt;&lt;%- encodeURI(config.root + post.path) %&gt;&lt;/url&gt;</span><br></pre></td></tr></table></figure></li></ol><h3 id="修改导航栏"><a href="#修改导航栏" class="headerlink" title="修改导航栏"></a>修改导航栏</h3><p>修改 themes/ocean/source/css/_partial/navbar.styl 文件</p><h3 id="文章添加封面图片"><a href="#文章添加封面图片" class="headerlink" title="文章添加封面图片"></a>文章添加封面图片</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Post name</span><br><span class="line">date: 2019-07-24 22:01:03</span><br><span class="line">photos: [</span><br><span class="line">        [&quot;/images/相机.jpg&quot;], // themes/ocean/source/images目录下</span><br><span class="line">        [&quot;https://tuchong.pstatp.com/2716763/f/531173888.jpg&quot;]</span><br><span class="line">  ]</span><br><span class="line">---</span><br></pre></td></tr></table></figure><p>在首页只会显示第一张，详情页会按顺序显示这两张</p><h3 id="为文章添加Gitalk评论"><a href="#为文章添加Gitalk评论" class="headerlink" title="为文章添加Gitalk评论"></a>为文章添加Gitalk评论</h3><p>参考：<a href="https://zhwangart.github.io/2018/12/06/Gitalk/" target="_blank" rel="noopener">https://zhwangart.github.io/2018/12/06/Gitalk/</a></p><h3 id="在右上角或者左上角实现fork-me-on-github"><a href="#在右上角或者左上角实现fork-me-on-github" class="headerlink" title="在右上角或者左上角实现fork me on github"></a>在右上角或者左上角实现fork me on github</h3><p>选样式：<a href="https://github.blog/2008-12-19-github-ribbons/" target="_blank" rel="noopener">GitHub Corners-1</a> &emsp;<a href="http://tholman.com/github-corners/" target="_blank" rel="noopener">GitHub Corners-2</a><br>然后粘贴刚才复制的代码到themes/ocean/layout/index.ejs文件中，放在&lt;div id=”landingpage”&gt;&lt;/div&gt;的第一行，并把href改为你的github地址<br>对样式做出修改：<br>&lt;div id=”landingpage”&gt; 修改为 &lt;div id=”landingpage” style=”position:relative;”&gt;<br>复制的&lt;a&gt;标签添加如下样式：style=”position:absolute;left:0;top:100;z-index=1000;”</p><h3 id="实现点击出现特效"><a href="#实现点击出现特效" class="headerlink" title="实现点击出现特效"></a>实现点击出现特效</h3><ol><li><p>点击桃心<br>下载：<a href="https://github.com/andus-top/andus-top.github.io/blob/master/js/love.js" target="_blank" rel="noopener">桃心Js</a><br>然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。<br>在themes/ocean/_config.yml最后一行写入：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">lovejs: true</span><br></pre></td></tr></table></figure><p> 将love.js文件放到路径/themes/ocean/source/js/src里面，然后打开\themes\ocean\layout\_partial\ after-footer.ejs文件, 在最后一行写入：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (theme.lovejs)&#123; %&gt;</span><br><span class="line">	&lt;%- js(<span class="string">'/js/love.js'</span>) %&gt;</span><br><span class="line">&lt;% &#125; %&gt;</span><br></pre></td></tr></table></figure></li><li><p>爆炸效果<br>下载：<a href="https://github.com/andus-top/andus-top.github.io/blob/master/js/fireworks.js" target="_blank" rel="noopener">fireworks.js</a>&emsp;<a href="https://github.com/andus-top/andus-top.github.io/blob/master/js/anime.min.js" target="_blank" rel="noopener">anime.min.js</a><br>步骤与上面类似保存js到/themes/ocean/source/js/src，最后在\themes\ocean\layout\_partial\ after-footer.ejs文件内容未写入：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (theme.fireworks)&#123; %&gt;</span><br><span class="line">   &lt;canvas <span class="class"><span class="keyword">class</span></span>=<span class="string">"fireworks"</span> style=<span class="string">"position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;"</span> &gt;<span class="xml"><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span></span><br><span class="line">   &lt;%- js(<span class="string">'/js/anime.min.js'</span>) %&gt;</span><br><span class="line">   &lt;%- js(<span class="string">'/js/fireworks.js'</span>) %&gt;</span><br><span class="line">&lt;% &#125; %&gt;</span><br></pre></td></tr></table></figure></li></ol><h3 id="头像旋转效果"><a href="#头像旋转效果" class="headerlink" title="头像旋转效果"></a>头像旋转效果</h3><p>打开\themes\ocean\layout\_partial\sidebar.ejs，给&lt;div class=logo&gt;下的img加上一个id。然后参考：<a href="https://blog.csdn.net/u011295864/article/details/84773123" target="_blank" rel="noopener">css + js实现图片不停旋转 鼠标悬停停止旋转</a><br>然后将里面的js代码copy到一个my.js文件中（注意替换img的id），保存到/themes/ocean/source/js/src目录。<br>然后在\themes\ocean\layout\_partial\after-footer.ejs中最后一行写入：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;%- js(<span class="string">'/js/my.js'</span>) %&gt;</span><br></pre></td></tr></table></figure><h3 id="网站底部加上访问量"><a href="#网站底部加上访问量" class="headerlink" title="网站底部加上访问量"></a>网站底部加上访问量</h3><p>\themes\ocean\layout\_partial\after-footer.ejs 中默认是导入了统计脚本的(busuanzi-2.3.pure.min.js )</p><p>修改访问量统计的样式：<br>将\themes\ocean\layout\_partial\post\busuanzi.ejs<br>修改为：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"powered-by"</span>&gt;</span><br><span class="line">  &lt;% <span class="keyword">if</span> (is_home()) &#123; %&gt;</span><br><span class="line">    &lt;span id=<span class="string">"busuanzi_container_site_pv"</span>&gt;访问量:<span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_pv"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><span class="xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line">  &lt;%&#125; %&gt;</span><br><span class="line">	&amp;emsp;<span class="xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-user-md"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_uv"</span>&gt;</span>访客数:<span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_uv"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>&amp;emsp;</span><br><span class="line">  &lt;% <span class="keyword">if</span> (is_post()) &#123; %&gt;</span><br><span class="line">    &lt;i <span class="class"><span class="keyword">class</span></span>=<span class="string">"fe fe-bookmark"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span>文章访问量:<span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_page_pv"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line">  &lt;%&#125; %&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure><h3 id="添加网站字数，阅读时间统计"><a href="#添加网站字数，阅读时间统计" class="headerlink" title="添加网站字数，阅读时间统计"></a>添加网站字数，阅读时间统计</h3><p>在根目录下运行：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-wordcount –save</span><br></pre></td></tr></table></figure><p>在\themes\ocean\_config.yml主题配置文件中加入：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">post_wordcount:</span><br><span class="line">  item_text: true</span><br><span class="line">  wordcount: true</span><br><span class="line">  min2read: true</span><br><span class="line">  totalcount: true</span><br><span class="line">  separated_meta: true</span><br></pre></td></tr></table></figure><p>在\themes\ocean\layout\_partial\footer.ejs文件中，在&lt;ul class=”list-inline”&gt;标签后加入：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"list-inline"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">li</span>&gt;</span>全站共<span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span><span class="tag">&lt;<span class="name">%=</span> <span class="attr">totalcount</span>(<span class="attr">site</span>) %&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span>字<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure><p>在\themes\ocean\layout\_partial\article.ejs文件中，在</p><div class="article-meta">标签中加入：</div><p></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&amp;emsp;<span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fe fe-bar-chart"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">wordcount</span>(<span class="attr">post.content</span>) %&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span>字</span><br><span class="line">&amp;emsp;<span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fe fe-clock"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">min2read</span>(<span class="attr">post.content</span>) %&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span>分钟</span><br></pre></td></tr></table></figure><h3 id="Ocean主题的图标"><a href="#Ocean主题的图标" class="headerlink" title="Ocean主题的图标"></a>Ocean主题的图标</h3><p>图标在\themes\ocean\source\css\_feathericon.styl中查找<br>官网：<a href="https://feathericons.com/" target="_blank" rel="noopener">feathericons</a></p><h3 id="为博客加上萌萌的宠物"><a href="#为博客加上萌萌的宠物" class="headerlink" title="为博客加上萌萌的宠物"></a>为博客加上萌萌的宠物</h3><p><a href="https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md" target="_blank" rel="noopener">hexo-helper-live2d</a><br>在网站根目录下执行</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -save hexo-helper-live2d</span><br><span class="line">npm install live2d-widget-model-haruto(自己选择的萌宠模型)</span><br></pre></td></tr></table></figure><p>在hexo的配置文件中添加：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"># 萌宠</span><br><span class="line"> live2d:</span><br><span class="line">  enable: true</span><br><span class="line">  scriptFrom: local</span><br><span class="line">  model:</span><br><span class="line">    use: live2d-widget-model-haruto</span><br><span class="line">    scale: 1</span><br><span class="line">    hHeadPos: 0.5</span><br><span class="line">    vHeadPos: 0.618</span><br><span class="line">  display:</span><br><span class="line">    superSample: 2</span><br><span class="line">    width: 150</span><br><span class="line">    height: 300</span><br><span class="line">    position: left</span><br><span class="line">    hOffset: 0</span><br><span class="line">    vOffset: -20</span><br><span class="line">  mobile:</span><br><span class="line">    show: true</span><br><span class="line">  react:</span><br><span class="line">    opacityDefault: 0.5</span><br><span class="line">    opacityOnHover: 0.2</span><br></pre></td></tr></table></figure><p>重启服务：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo clean &amp;&amp; hexo g &amp;&amp; hexo s</span><br></pre></td></tr></table></figure><h3 id="添加网站运行时间"><a href="#添加网站运行时间" class="headerlink" title="添加网站运行时间"></a>添加网站运行时间</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;span id=<span class="string">"timeDate"</span>&gt;载入天数...&lt;<span class="regexp">/span&gt;&lt;span id="times"&gt;载入时分秒...&lt;/</span>span&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> now = <span class="keyword">new</span> <span class="built_in">Date</span>(); </span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">createtime</span>(<span class="params"></span>) </span>&#123; </span><br><span class="line">        <span class="keyword">var</span> grt= <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">"04/26/2019 15:49:00"</span>);<span class="comment">//此处修改你的建站时间或者网站上线时间 </span></span><br><span class="line">        now.setTime(now.getTime()+<span class="number">250</span>); </span><br><span class="line">        days = (now - grt ) / <span class="number">1000</span> / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>; dnum = <span class="built_in">Math</span>.floor(days); </span><br><span class="line">        hours = (now - grt ) / <span class="number">1000</span> / <span class="number">60</span> / <span class="number">60</span> - (<span class="number">24</span> * dnum); hnum = <span class="built_in">Math</span>.floor(hours); </span><br><span class="line">        <span class="keyword">if</span>(<span class="built_in">String</span>(hnum).length ==<span class="number">1</span> )&#123;hnum = <span class="string">"0"</span> + hnum;&#125; minutes = (now - grt ) / <span class="number">1000</span> /<span class="number">60</span> - (<span class="number">24</span> * <span class="number">60</span> * dnum) - (<span class="number">60</span> * hnum); </span><br><span class="line">        mnum = <span class="built_in">Math</span>.floor(minutes); <span class="keyword">if</span>(<span class="built_in">String</span>(mnum).length ==<span class="number">1</span> )&#123;mnum = <span class="string">"0"</span> + mnum;&#125; </span><br><span class="line">        seconds = (now - grt ) / <span class="number">1000</span> - (<span class="number">24</span> * <span class="number">60</span> * <span class="number">60</span> * dnum) - (<span class="number">60</span> * <span class="number">60</span> * hnum) - (<span class="number">60</span> * mnum); </span><br><span class="line">        snum = <span class="built_in">Math</span>.round(seconds); <span class="keyword">if</span>(<span class="built_in">String</span>(snum).length ==<span class="number">1</span> )&#123;snum = <span class="string">"0"</span> + snum;&#125; </span><br><span class="line">        <span class="built_in">document</span>.getElementById(<span class="string">"timeDate"</span>).innerHTML = <span class="string">"本站已安全运行 "</span>+dnum+<span class="string">" 天 "</span>; </span><br><span class="line">        <span class="built_in">document</span>.getElementById(<span class="string">"times"</span>).innerHTML = hnum + <span class="string">" 小时 "</span> + mnum + <span class="string">" 分 "</span> + snum + <span class="string">" 秒"</span>; </span><br><span class="line">    &#125; </span><br><span class="line">	setInterval(<span class="string">"createtime()"</span>,<span class="number">250</span>);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><p>将以上代码保存到\themes\ocean\layout\_partial\post\runtime.ejs</p><p>在\themes\ocean\layout\_partial\footer.ejs文件中，第一个&lt;ul class=”list-inline”&gt;&lt;/ul&gt;标签后加入：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"float-right"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">%-</span> <span class="attr">partial</span>('<span class="attr">post</span>/<span class="attr">runtime</span>') %&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="添加DaoVoice-在线联系"><a href="#添加DaoVoice-在线联系" class="headerlink" title="添加DaoVoice 在线联系"></a>添加DaoVoice 在线联系</h3><p>首先在<a href="https://account.daocloud.io/signin" target="_blank" rel="noopener">https://account.daocloud.io/signin</a> &emsp;注册账号<br>然后点击下方链接<br><a href="http://dashboard.daovoice.io/get-started?invite_code=0f81ff2f" target="_blank" rel="noopener">http://dashboard.daovoice.io/get-started?invite_code=0f81ff2f</a><br>之后会得到一个app_id</p><p>在主题配置文件写入：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># Online contact </span><br><span class="line">daovoice: true</span><br><span class="line">daovoice_app_id: 这里填你的刚才获得的 app_id</span><br></pre></td></tr></table></figure><p>在\themes\ocean\layout\_partial\footer.ejs中，&lt;/head&gt;前写入：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (theme.daovoice)&#123; %&gt;</span><br><span class="line">  &lt;script&gt;</span><br><span class="line">  (<span class="function"><span class="keyword">function</span>(<span class="params">i,s,o,g,r,a,m</span>)</span>&#123;i[<span class="string">"DaoVoiceObject"</span>]=r;i[r]=i[r]||<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;(i[r].q=i[r].q||[]).push(<span class="built_in">arguments</span>)&#125;,i[r].l=<span class="number">1</span>*<span class="keyword">new</span> <span class="built_in">Date</span>();a=s.createElement(o),m=s.getElementsByTagName(o)[<span class="number">0</span>];a.async=<span class="number">1</span>;a.src=g;a.charset=<span class="string">"utf-8"</span>;m.parentNode.insertBefore(a,m)&#125;)(<span class="built_in">window</span>,<span class="built_in">document</span>,<span class="string">"script"</span>,(<span class="string">'https:'</span> == <span class="built_in">document</span>.location.protocol ? <span class="string">'https:'</span> : <span class="string">'http:'</span>) + <span class="string">"//widget.daovoice.io/widget/0f81ff2f.js"</span>,<span class="string">"daovoice"</span>)</span><br><span class="line">  daovoice(<span class="string">'init'</span>, &#123;</span><br><span class="line">      app_id: <span class="string">"&lt;%- theme.daovoice_app_id %&gt;"</span></span><br><span class="line">    &#125;);</span><br><span class="line">  daovoice(<span class="string">'update'</span>);</span><br><span class="line">  &lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;% &#125; %&gt;</span></span><br></pre></td></tr></table></figure><h3 id="取消文章下面的分享连接，添加本文结束"><a href="#取消文章下面的分享连接，添加本文结束" class="headerlink" title="取消文章下面的分享连接，添加本文结束"></a>取消文章下面的分享连接，添加本文结束</h3><p>去掉\themes\ocean\layout\_partial\article.ejs中的以下代码：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">data-url</span>=<span class="string">"&lt;%- post.permalink %&gt;"</span> <span class="attr">data-id</span>=<span class="string">"&lt;%= post._id %&gt;"</span> <span class="attr">class</span>=<span class="string">"article-share-link"</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">theme.share_text</span> %&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>同时还可以添加本文结束 感谢阅读等说明:<br>如在&lt;%- partial(‘post/tag’) %&gt;下面一行添加：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (!index &amp;&amp; is_post()) &#123; %&gt;</span><br><span class="line">	&lt;div style=<span class="string">"text-align:center;color: #ccc;font-size:14px;"</span>&gt;------------- 本文结束&amp;nbsp;<span class="xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fe fe-smile"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span>&amp;nbsp;感谢您的阅读 -------------<span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;% &#125; %&gt;</span><br></pre></td></tr></table></figure><h3 id="博文压缩"><a href="#博文压缩" class="headerlink" title="博文压缩"></a>博文压缩</h3><p>在根目录下执行：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install gulp -g</span><br><span class="line">npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp –save</span><br></pre></td></tr></table></figure><p>在根目录下新建gulpfile.js，写入一下内容：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"><span class="comment">//Plugins模块获取</span></span><br><span class="line"><span class="keyword">var</span> minifycss = <span class="built_in">require</span>(<span class="string">'gulp-minify-css'</span>);</span><br><span class="line"><span class="keyword">var</span> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>);</span><br><span class="line"><span class="keyword">var</span> htmlmin = <span class="built_in">require</span>(<span class="string">'gulp-htmlmin'</span>);</span><br><span class="line"><span class="keyword">var</span> htmlclean = <span class="built_in">require</span>(<span class="string">'gulp-htmlclean'</span>);</span><br><span class="line"><span class="comment">//压缩css</span></span><br><span class="line">gulp.task(<span class="string">'minify-css'</span>,</span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.src(<span class="string">'./public/**/*.css'</span>).pipe(minifycss()).pipe(gulp.dest(<span class="string">'./public'</span>));</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//压缩html</span></span><br><span class="line">gulp.task(<span class="string">'minify-html'</span>,</span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.src(<span class="string">'./public/**/*.html'</span>).pipe(htmlclean()).pipe(htmlmin(&#123;</span><br><span class="line">        removeComments: <span class="literal">true</span>,</span><br><span class="line">        minifyJS: <span class="literal">true</span>,</span><br><span class="line">        minifyCSS: <span class="literal">true</span>,</span><br><span class="line">        minifyURLs: <span class="literal">true</span>,</span><br><span class="line">    &#125;))</span><br><span class="line">    .pipe(gulp.dest(<span class="string">'./public'</span>))</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//压缩js 不压缩min.js</span></span><br><span class="line">gulp.task(<span class="string">'minify-js'</span>,</span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> gulp.src([<span class="string">'./public/**/*.js'</span>, <span class="string">'!./public/**/*.min.js'</span>]).pipe(uglify()).pipe(gulp.dest(<span class="string">'./public'</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//4.0以前的写法 </span></span><br><span class="line"><span class="comment">//gulp.task('default', [</span></span><br><span class="line"><span class="comment">//  'minify-html', 'minify-css', 'minify-js'</span></span><br><span class="line"><span class="comment">//]);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//4.0以后的写法</span></span><br><span class="line"><span class="comment">// 执行 gulp 命令时执行的任务</span></span><br><span class="line"><span class="comment">//gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js',</span></span><br><span class="line"><span class="comment">//function() &#123;</span></span><br><span class="line">    <span class="comment">// Do something after a, b, and c are finished.</span></span><br><span class="line"><span class="comment">//	console.log('success')</span></span><br><span class="line"><span class="comment">//&#125;));</span></span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>,gulp.series(gulp.parallel(<span class="string">'minify-html'</span>,<span class="string">'minify-css'</span>,<span class="string">'minify-js'</span>)));</span><br></pre></td></tr></table></figure><p>生成博文时执行</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo clean &amp;&amp; hexo g &amp;&amp; gulp &amp;&amp; hexo d</span><br></pre></td></tr></table></figure><p>就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。</p><h3 id="修改文章封面图片的引入方式，同时支持相对地址与http的图片"><a href="#修改文章封面图片的引入方式，同时支持相对地址与http的图片" class="headerlink" title="修改文章封面图片的引入方式，同时支持相对地址与http的图片"></a>修改文章封面图片的引入方式，同时支持相对地址与http的图片</h3><p>将\themes\ocean\layout\_partial\post\gallery.ejs<br>中的&lt;% if (index){ %&gt;的上一行写入：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">var</span> idx = url_for(photo).indexOf(<span class="string">'http'</span>) %&gt;</span><br></pre></td></tr></table></figure><p>将文中两处的：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"&lt;%- url_for(photo) %&gt;"</span> <span class="attr">itemprop</span>=<span class="string">"image"</span>&gt;</span></span><br></pre></td></tr></table></figure><p>修改为：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;% if(idx &lt; 0) &#123; %&gt;</span><br><span class="line">	<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"&lt;%- url_for(post.path)+url_for(photo).substring(1) %&gt;"</span> <span class="attr">itemprop</span>=<span class="string">"image"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> &#125; <span class="attr">else</span> &#123; %&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"&lt;%- url_for(photo) %&gt;"</span> <span class="attr">itemprop</span>=<span class="string">"image"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> &#125; %&gt;</span></span><br></pre></td></tr></table></figure><h3 id="设置封面图片不在内容详情页展示"><a href="#设置封面图片不在内容详情页展示" class="headerlink" title="设置封面图片不在内容详情页展示"></a>设置封面图片不在内容详情页展示</h3><p>将\themes\ocean\layout\_partial\article.ejs<br>中的</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;%- partial(<span class="string">'post/gallery'</span>) %&gt;</span><br></pre></td></tr></table></figure><p>修改为：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (index)&#123; %&gt;</span><br><span class="line">	&lt;%- partial(<span class="string">'post/gallery'</span>) %&gt;</span><br><span class="line">&lt;% &#125; %&gt;</span><br></pre></td></tr></table></figure><h3 id="去掉rss订阅"><a href="#去掉rss订阅" class="headerlink" title="去掉rss订阅"></a>去掉rss订阅</h3><p>根目录下执行：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall hexo-generator-feed –save</span><br></pre></td></tr></table></figure><p>将\themes\ocean\_config.yml文件中修改为：rss: false</p><h3 id="导航栏图表改为在文字左侧"><a href="#导航栏图表改为在文字左侧" class="headerlink" title="导航栏图表改为在文字左侧"></a>导航栏图表改为在文字左侧</h3><p>修改\themes\ocean\source\css\_partial\navbar.styl</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&amp;<span class="selector-class">.nav-main</span></span><br><span class="line">      <span class="selector-class">.nav-item-link</span></span><br><span class="line">        &amp;<span class="selector-pseudo">::before</span>, <span class="selector-tag">i</span><span class="selector-class">.fe</span></span><br><span class="line">          <span class="selector-tag">display</span> <span class="selector-tag">block</span></span><br><span class="line">          <span class="selector-tag">line-height</span> 1</span><br><span class="line">        &amp;<span class="selector-pseudo">::before</span></span><br><span class="line">          font-family 'feathericon'</span><br></pre></td></tr></table></figure><p>修改为：</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&amp;<span class="selector-class">.nav-main</span></span><br><span class="line">      <span class="selector-class">.nav-item-link</span></span><br><span class="line">        &amp;<span class="selector-pseudo">::before</span>, <span class="selector-tag">i</span><span class="selector-class">.fe</span></span><br><span class="line">          // display block</span><br><span class="line">          <span class="selector-tag">line-height</span> 1</span><br><span class="line">		   <span class="selector-tag">margin-right</span>: 10<span class="selector-tag">px</span>;</span><br><span class="line">        &amp;<span class="selector-pseudo">::before</span></span><br><span class="line">          font-family 'feathericon'</span><br></pre></td></tr></table></figure><h3 id="添加readme-md不被渲染"><a href="#添加readme-md不被渲染" class="headerlink" title="添加readme.md不被渲染"></a>添加readme.md不被渲染</h3><p>在Hexo目录下的source根目录下添加一个, README.md。<br>修改Hexo目录下的_config.yml。<br>将skip_render参数的值设置上。skip_render: README.md<br>保存退出即可。</p><h3 id="首页视屏换成图片"><a href="#首页视屏换成图片" class="headerlink" title="首页视屏换成图片"></a>首页视屏换成图片</h3><p>将\themes\ocean\layout\_partial\ocean.ejs中</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">playsinline</span>=<span class="string">""</span> <span class="attr">autoplay</span>=<span class="string">""</span> <span class="attr">loop</span>=<span class="string">""</span> <span class="attr">muted</span>=<span class="string">""</span> <span class="attr">data-autoplay</span>=<span class="string">""</span></span></span><br><span class="line"><span class="tag">   <span class="attr">poster</span>=<span class="string">"&lt;%- theme.ocean.path %&gt;ocean.png"</span> <span class="attr">x5-video-player-type</span>=<span class="string">"h5"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">"&lt;%- theme.ocean.path %&gt;ocean.mp4"</span> <span class="attr">type</span>=<span class="string">"video/mp4"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">"&lt;%- theme.ocean.path %&gt;ocean.ogv"</span> <span class="attr">type</span>=<span class="string">"video/ogg"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">"&lt;%- theme.ocean.path %&gt;ocean.webm"</span> <span class="attr">type</span>=<span class="string">"video/webm"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>Your user agent does not support the HTML5 Video element.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure><p>修改为：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"&lt;%- theme.ocean.path %&gt;ocean.png"</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="去掉首页视频或图片"><a href="#去掉首页视频或图片" class="headerlink" title="去掉首页视频或图片"></a>去掉首页视频或图片</h3><p>去掉themes/ocean/layout/index.ejs中的</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;%- partial(<span class="string">'_partial/ocean'</span>) %&gt;</span><br></pre></td></tr></table></figure><h3 id="is-home-、is-post-函数判断不正确"><a href="#is-home-、is-post-函数判断不正确" class="headerlink" title="is_home()、is_post() 函数判断不正确"></a>is_home()、is_post() 函数判断不正确</h3><p>将\themes\ocean\layout\layout.ejs中</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;%- partial(<span class="string">'_partial/footer'</span>, <span class="literal">null</span>, &#123;<span class="attr">cache</span>: !config.relative_link&#125;) %&gt;</span><br></pre></td></tr></table></figure><p>修改为</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;%- partial(<span class="string">'_partial/footer'</span>, <span class="literal">null</span>, &#123;<span class="attr">cache</span>: config.relative_link&#125;) %&gt;</span><br></pre></td></tr></table></figure><p>就是将partial中的cache设置为false。参考：<a href="https://github.com/zhwangart/hexo-theme-ocean/issues/18" target="_blank" rel="noopener">is_home()、is_post() 函数判断不正确</a></p><h3 id="视频-or-图片只在pc端显示，不在移动端显示"><a href="#视频-or-图片只在pc端显示，不在移动端显示" class="headerlink" title="视频 or 图片只在pc端显示，不在移动端显示"></a>视频 or 图片只在pc端显示，不在移动端显示</h3><p>修改themes\ocean\source\css_partial\layou.styl文件</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// Media Query</span><br><span class="line">@<span class="keyword">media</span> (min-width: <span class="number">768px</span>)</span><br><span class="line">  .jumbotron</span><br><span class="line">    margin-bottom <span class="number">6rem</span></span><br><span class="line">    display block   //此处为新增。设备宽度大于等于<span class="number">768</span>像素时显示视频or图片</span><br></pre></td></tr></table></figure><p>在文件末尾新增</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">media</span> (max-width: <span class="number">768px</span>)</span><br><span class="line">  .jumbotron</span><br><span class="line">    display none  // 设备宽度小于等于<span class="number">768</span>像素时不显示视频or图片</span><br></pre></td></tr></table></figure><p>此时会发现移动端左上角有点空旷，则进行如下修改<br>修改themes\ocean\layout_partial\archive.ejs文件</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> title = <span class="string">''</span>;</span><br><span class="line"><span class="keyword">var</span> mobile_title = <span class="string">"松林羊 Blog"</span>;  <span class="comment">// 此处为新增</span></span><br><span class="line">...</span><br><span class="line">&lt;h1 <span class="class"><span class="keyword">class</span></span>=<span class="string">"page-type-title pc"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">%-</span> <span class="attr">title</span> %&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span> <span class="comment">// 新增类名为pc的样式</span></span><br><span class="line">&lt;h1 <span class="class"><span class="keyword">class</span></span>=<span class="string">"page-type-title mobile"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">%-</span> <span class="attr">mobile_title</span> %&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span> <span class="comment">// 此处为新增</span></span><br></pre></td></tr></table></figure><p>修改themes\ocean\source\css_partial\archive.styl文件</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.page-type-title</span></span><br><span class="line">  <span class="selector-tag">margin</span> 0</span><br><span class="line">  <span class="selector-tag">padding</span> 3<span class="selector-tag">rem</span> 0</span><br><span class="line"> // 以下内容为新增</span><br><span class="line">  &amp;<span class="selector-class">.pc</span></span><br><span class="line">    @<span class="keyword">media</span> screen and (max-width: <span class="number">768px</span>)</span><br><span class="line">      display none</span><br><span class="line">    @media screen and (min-width: <span class="number">768px</span>)</span><br><span class="line">      display block</span><br><span class="line">  &amp;.mobile</span><br><span class="line">    @media screen and (max-width: <span class="number">768px</span>)</span><br><span class="line">      display block</span><br><span class="line">      font-family <span class="string">'STXingkai'</span></span><br><span class="line">    @media screen and (min-width: <span class="number">768px</span>)</span><br><span class="line">      display none</span><br></pre></td></tr></table></figure><h3 id="配置fancybox展示文章图集"><a href="#配置fancybox展示文章图集" class="headerlink" title="配置fancybox展示文章图集"></a>配置fancybox展示文章图集</h3><p>在themes\ocean\layout\_partial\after-footer.ejs文件末尾加入如下代码</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (is_post())&#123; %&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="comment">// 使用fancybox来显示post图片集(#andus-head-img为头像id)</span></span><br><span class="line">$(<span class="string">'img:not(#andus-head-img)'</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  $(<span class="keyword">this</span>).wrap(<span class="string">'&lt;a class="fancybox" data-fancybox="gallery" href="'</span> + $(<span class="keyword">this</span>).prop(<span class="string">"src"</span>) + <span class="string">'"&gt;&lt;/a&gt;'</span>); </span><br><span class="line">&#125;)</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;% &#125; %&gt;</span></span><br></pre></td></tr></table></figure><h3 id="更换评论系统，由gitalk跟换为valine-并增加邮件通知功能"><a href="#更换评论系统，由gitalk跟换为valine-并增加邮件通知功能" class="headerlink" title="更换评论系统，由gitalk跟换为valine, 并增加邮件通知功能"></a>更换评论系统，由gitalk跟换为valine, 并增加邮件通知功能</h3><p>依次参考<br><a href="https://ioliu.cn/2017/add-valine-comments-to-your-blog/" target="_blank" rel="noopener">Valine–一款极简的评论系统</a><br><a href="https://valine.js.org/" target="_blank" rel="noopener">Valine</a><br><a href="https://github.com/zhaojun1998/Valine-Admin" target="_blank" rel="noopener">Valine-Admin</a><br>在<code>themes/ocean/_config.yml</code>文件中新增以下内容，同时确保<code>gitalk.enable</code>为<code>false</code></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"># Valine 不能与gitalk同时开启</span><br><span class="line">valine:</span><br><span class="line">  enable: true</span><br><span class="line">  app_id:  # 这里填写得到的APP ID</span><br><span class="line">  app_key:  # 这里填写得到的APP KEY</span><br><span class="line">  placeholder: 记得留下你的昵称和邮箱...可以快速收到回复ヾﾉ≧∀≦)o # [v1.0.7 new]留言框占位提示文字</span><br><span class="line">  notify: true # 评论回复邮件提醒 。 第三方支持：https://github.com/zhaojun1998/Valine-Admin</span><br><span class="line">  verify: false # 验证码 。 开启邮件提醒会默认开启验证码选项</span><br><span class="line">  avatar: monsterid # Gravatar头像。可选项：[identicon monsterid  wavatar retro robohash mp &apos;&apos;] ，见 https://valine.js.org/avatar.html</span><br><span class="line">  recordIP: true # 是否记录评论者ip</span><br><span class="line">  visitor: false  # 阅读量统计 https://valine.js.org/visitor.html</span><br></pre></td></tr></table></figure><p>拷贝<code>themes\ocean\layout\_partial\post\gitalk.ejs</code>重命名为<code>valine.ejs</code><br>全部内容修改为</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (theme.valine.enable) &#123; %&gt;</span><br><span class="line">  &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"comment_headling"</span>  style=<span class="string">"margin-top:5rem;"</span>&gt;</span><br><span class="line">	&lt;font size=<span class="string">"5"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fe fe-comments"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span> 评论&lt;<span class="regexp">/font&gt;</span></span><br><span class="line"><span class="regexp">  &lt;/</span>div&gt;</span><br><span class="line">  &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"comment"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &lt;%- js(<span class="string">'https://cdn1.lncld.net/static/js/3.0.4/av-min.js'</span>) %&gt;</span><br><span class="line">  &lt;%- js(<span class="string">'js/Valine.min.js'</span>) %&gt;</span><br><span class="line">  &lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">  <span class="comment">// https://cdnjs.cloudflare.com/ajax/libs/valine/1.3.10/Valine.min.js</span></span><br><span class="line">  GUEST_INFO = [<span class="string">"nick"</span>, <span class="string">"mail"</span>, <span class="string">"link"</span>],</span><br><span class="line">  guest_info = <span class="string">"nick,mail,link"</span>.split(<span class="string">","</span>).filter(<span class="function"><span class="keyword">function</span>(<span class="params">i</span>) </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> - <span class="number">1</span> &lt; GUEST_INFO.indexOf(i)</span><br><span class="line">  &#125;);</span><br><span class="line">  guest_info = <span class="number">0</span> == guest_info.length ? GUEST_INFO: guest_info,</span><br><span class="line">  <span class="keyword">new</span> Valine(&#123;</span><br><span class="line">	 <span class="comment">// AV 对象来自上面引入av-min.js</span></span><br><span class="line">	 av: AV, </span><br><span class="line">	 el: <span class="string">'.comment'</span>,</span><br><span class="line">	 app_id: <span class="string">'&lt;%- theme.valine.app_id %&gt;'</span>, </span><br><span class="line">	 app_key: <span class="string">'&lt;%- theme.valine.app_key %&gt;'</span>, </span><br><span class="line">	 placeholder: <span class="string">'&lt;%- theme.valine.placeholder %&gt;'</span>,</span><br><span class="line">	 meta: guest_info,</span><br><span class="line">	 notify: <span class="xml"><span class="tag">&lt;<span class="name">%-</span> <span class="attr">theme.valine.notify</span> %&gt;</span>,</span></span><br><span class="line"><span class="xml">	 verify: <span class="tag">&lt;<span class="name">%-</span> <span class="attr">theme.valine.verify</span> %&gt;</span>,</span></span><br><span class="line"><span class="xml">	 avatar: '<span class="tag">&lt;<span class="name">%-</span> <span class="attr">theme.valine.avatar</span> %&gt;</span>',</span></span><br><span class="line"><span class="xml">	 recordIP: <span class="tag">&lt;<span class="name">%-</span> <span class="attr">theme.valine.recordIP</span> %&gt;</span>,</span></span><br><span class="line"><span class="xml">	 visitor: <span class="tag">&lt;<span class="name">%-</span> <span class="attr">theme.valine.visitor</span> %&gt;</span>,</span></span><br><span class="line"><span class="xml">	 lang: 'zh-cn'</span></span><br><span class="line"><span class="xml">  &#125;);</span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">&lt;% &#125; %&gt;</span><br></pre></td></tr></table></figure><p>修改<code>themes\ocean\layout\_partial\article.ejs</code>文件</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (is_post()) &#123; %&gt;</span><br><span class="line">	&lt;%- partial(<span class="string">'post/gitalk'</span>) %&gt;</span><br><span class="line">	&lt;%# 下面为新增内容 %&gt;</span><br><span class="line">	&lt;%- partial(<span class="string">'post/valine'</span>) %&gt;</span><br><span class="line">&lt;%&#125; %&gt;</span><br></pre></td></tr></table></figure><p>关闭评论时的验证码，将<code>Valine.min.js</code>保存到<code>themes\ocean\source\js</code>目录下，将其中</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">u.attr(Q, <span class="string">"style"</span>, <span class="string">"display:block;"</span>), t &amp;&amp; t.type) &#123;</span><br><span class="line">	<span class="keyword">var</span> o = u.find(Q, <span class="string">".vsure"</span>);</span><br><span class="line">	u.on(<span class="string">"click"</span>, o,</span><br><span class="line">	<span class="function"><span class="keyword">function</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">		e.alert.hide(),</span><br><span class="line">		t.cb &amp;&amp; t.cb()</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>修改为</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">u.attr(Q, <span class="string">"style"</span>, <span class="string">"display:none;"</span>), t &amp;&amp; t.type) &#123;</span><br><span class="line">	e.alert.hide(),</span><br><span class="line">	t.cb &amp;&amp; t.cb()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h6 id="记录-自用"><a href="#记录-自用" class="headerlink" title="记录(自用)"></a>记录(自用)</h6><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;%- page.content.substring(<span class="number">0</span>,tips) %&gt; 显示html的样式结果</span><br><span class="line">&lt;%= page.content.substring(<span class="number">0</span>,tips) %&gt;显示html源代码</span><br></pre></td></tr></table></figure></div><footer class="article-footer"><ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ocean/">ocean</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/博客/">博客</a></li></ul><div style="text-align:center;color:#ccc;font-size:14px;margin-top:10px"> ------------- 本文结束&nbsp;<i class="fe fe-smile"></i>&nbsp;感谢您的阅读 -------------</div></footer></div><nav class="article-nav"> <a href="/2019/10/17/SpringBoot应用部署到Glassfish上-dev环境/" class="article-nav-link"><strong class="article-nav-caption">前一篇</strong><div class="article-nav-title"> SpringBoot应用部署到Glassfish上(dev环境)</div></a> <a href="/2019/08/22/Dockerfile使用-集成JAVA-Python-Redis-Tomcat-Nginx镜像，Based-on-Ubuntu18-04/" class="article-nav-link"><strong class="article-nav-caption">后一篇</strong><div class="article-nav-title">Dockerfile使用-集成JAVA Python Redis Tomcat Nginx镜像，Based on Ubuntu18.04</div></a></nav><div class="comment_headling" style="margin-top:5rem"><font size="5"><i class="fe fe-comments"></i> 评论</font></div><div class="comment"></div><script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="/js/Valine.min.js"></script><script type="text/javascript">GUEST_INFO=["nick","mail","link"],guest_info="nick,mail,link".split(",").filter(function(i){return-1<GUEST_INFO.indexOf(i)}),guest_info=0==guest_info.length?GUEST_INFO:guest_info,new Valine({av:AV,el:".comment",app_id:"fq4O7Xaf1cYDbADGellNEn6V-gzGzoHsz",app_key:"a626rNIHkVVk8tGBBCfaQjb9",placeholder:"记得留下你的昵称和邮箱...可以快速收到回复ヾﾉ≧∀≦)o",meta:guest_info,notify:!0,verify:!1,avatar:"monsterid",recordIP:!0,visitor:!1,lang:"zh-cn"})</script></article></section><footer class="footer"><div class="outer"><ul class="list-inline"><li>已分享 48 篇博文，累计 <span class="post-count">55.1k</span> 字</li><ul class="list-inline"><li><i class="fe fe-smile-alt"></i>&nbsp;访客数&emsp;<span id="busuanzi_value_site_uv"></span></li><li><i class="fe fe-bookmark"></i>&nbsp;文章访问量&emsp;<span id="busuanzi_value_page_pv"></span></li></ul></ul><ul class="list-inline"><li><span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span></li><script>var now=new Date;function createtime(){var n=new Date("07/28/2019 10:02:00");now.setTime(now.getTime()+250),days=(now-n)/1e3/60/60/24,dnum=Math.floor(days),hours=(now-n)/1e3/60/60-24*dnum,hnum=Math.floor(hours),1==String(hnum).length&&(hnum="0"+hnum),minutes=(now-n)/1e3/60-1440*dnum-60*hnum,mnum=Math.floor(minutes),1==String(mnum).length&&(mnum="0"+mnum),seconds=(now-n)/1e3-86400*dnum-3600*hnum-60*mnum,snum=Math.round(seconds),1==String(snum).length&&(snum="0"+snum),document.getElementById("timeDate").innerHTML="已等候你 "+dnum+" 天 ",document.getElementById("times").innerHTML=hnum+" 小时 "+mnum+" 分 "+snum+" 秒"}setInterval("createtime()",250)</script><ul class="list-inline"><li>&copy; 2019-2020 松林羊</li><li>Theme <a href="https://github.com/zhwangart/hexo-theme-ocean">Ocean</a></li></ul></ul></div></footer></main><aside class="sidebar sidebar-specter"> <button class="navbar-toggle"></button><nav class="navbar"><div class="logo"> <a href="/"><img id="andus-head-img" src="/images/head-nav.png" alt="松林羊"></a></div><ul class="nav nav-main"><li class="nav-item"> <a class="nav-item-link" href="/" target="_self">主页</a></li><li class="nav-item"> <a class="nav-item-link" href="/archives" target="_self">归档</a></li><li class="nav-item"> <a class="nav-item-link" href="/categories" target="_self">分类</a></li><li class="nav-item"> <a class="nav-item-link" href="/tags" target="_self">标签</a></li><li class="nav-item"> <a class="nav-item-link" href="/links" target="_self">友链</a></li><li class="nav-item"> <a class="nav-item-link">综合</a><ul class="nav nav-main nav2"><li class="nav-item li2"> <a class="nav-item-link-child" href="/resource" target="_self">资 源</a></li><li class="nav-item li2"> <a class="nav-item-link-child" href="/site" target="_self">网 站</a></li></ul></li><li class="nav-item"> <a class="nav-item-link">关于</a><ul class="nav nav-main nav2"><li class="nav-item li2"> <a class="nav-item-link-child" href="/me" target="_self">博 主</a></li><li class="nav-item li2"> <a class="nav-item-link-child" href="http://stars.andus.top/" target="_blank">记 录</a></li></ul></li><li class="nav-item"><a class="nav-item-link nav-item-search" title="搜索"><i class="fe fe-search"></i> 搜索</a></li></ul></nav><nav class="navbar navbar-bottom"><ul class="nav"><li class="nav-item"><div class="totop" id="totop"><i class="fe fe-rocket"></i></div></li><li class="nav-item"></li></ul></nav><div class="search-form-wrap"><div class="local-search local-search-plugin"> <input type="search" id="local-search-input" class="local-search-input" placeholder="Search..."><div id="local-search-result" class="local-search-result"></div></div></div></aside><script src="/js/jquery-2.0.3.min.js"></script><script src="/js/jquery.justifiedGallery.min.js"></script><script src="/js/lazyload.min.js"></script><script src="/js/busuanzi-2.3.pure.min.js"></script><script src="/fancybox/jquery.fancybox.min.js"></script><script src="/js/tocbot.min.js"></script><script>900<=document.body.clientWidth&&tocbot.init({tocSelector:".tocbot",contentSelector:".article-entry",headingSelector:"h1, h2, h3, h4, h5, h6",hasInnerContainers:!0,scrollSmooth:!0,positionFixedSelector:".tocbot",positionFixedClass:"is-position-fixed",fixedSidebarOffset:"auto"})</script><script src="/js/ocean.js"></script><script src="/js/andus.js"></script><script src="/js/love.js"></script><script>$("img:not(#andus-head-img)").each(function(){$(this).wrap('<a class="fancybox" data-fancybox="gallery" href="'+$(this).prop("src")+'"></a>')})</script><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({model:{scale:1,hHeadPos:.5,vHeadPos:.618,jsonPath:"/live2dw/assets/haruto.model.json"},display:{superSample:2,width:150,height:300,position:"left",hOffset:0,vOffset:-20},mobile:{show:!1},react:{opacityDefault:.5,opacityOnHover:.2},log:!1,pluginJsPath:"lib/",pluginModelPath:"assets/",pluginRootPath:"live2dw/",tagMode:!1})</script></body>